<template>
  <div class="periodic_report_wrapper">
    <div class="main_part">
      <div class="header_text">
        <i class="el-icon-data-line"></i>
        <span>报告历史</span>
      </div>
      <!-- 标签页 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="临时" name="0">
          <PublicTablePart
            :tableData="tableDataTemporary"
            :pageParams="pageParamsTemporary"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            @handleSearch="handleSearch"
            @handleDelete="handleDelete"
          ></PublicTablePart>
        </el-tab-pane>
        <el-tab-pane label="永久" name="1">
          <PublicTablePart
            :tableData="tableDataSubmit"
            :pageParams="pageParamsSubmit"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            @handleSearch="handleSearch"
            @handleDelete="handleDelete"
          ></PublicTablePart>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import PublicTablePart from './components/public-table-part.vue'
import { mapActions } from 'vuex'
export default {
  components: {
    PublicTablePart,
  },
  data() {
    return {
      tableDataTemporary: [],
      tableDataSubmit: [],
      pageParamsTemporary: {
        pageNo: 1,
        pageSize: 10,
        total: 100,
      },
      pageParamsSubmit: {
        pageNo: 1,
        pageSize: 10,
        total: 100,
      },
      formDataTemporary: {
        reportType: '',
        exportName: '',
      },
      formDataSubmit: {
        reportType: '',
        exportName: '',
      },
      activeName: '0',
      projectId: '',
      environment: '',
    }
  },
  created() {
    this.projectId = localStorage.getItem('sys-project-id')
    this.environment = localStorage.getItem('environment')
    this.getTableData()
  },
  methods: {
    ...mapActions('reportManagement', ['getReportHistoryAPI']),
    // 切换tab
    handleClick(val) {
      this.getTableData()
    },

    // 获取表格数据
    async getTableData() {
      const params = {
        type: this.activeName,
        projectId: this.projectId,
        environment: this.environment,
      }
      if (this.activeName === '0') {
        params.reportType = this.formDataTemporary.reportType
        params.exportName = this.formDataTemporary.exportName
        params.pageNo = this.pageParamsTemporary.pageNo
        params.pageSize = this.pageParamsTemporary.pageSize
      } else {
        params.reportType = this.formDataSubmit.reportType
        params.exportName = this.formDataSubmit.exportName
        params.pageNo = this.pageParamsSubmit.pageNo
        params.pageSize = this.pageParamsSubmit.pageSize
      }
      
      const res = await this.getReportHistoryAPI({ params })
      if (res.code === 200) {
        if (this.activeName === '0') {
          this.pageParamsTemporary.total = res.data.total
          this.tableDataTemporary = res.data.records
        } else {
          this.pageParamsSubmit.total = res.data.total
          this.tableDataSubmit = res.data.records
        }
      }
    },

    handleSizeChange(val) {
      if (this.activeName === '0') {
        this.pageParamsTemporary.pageSize = val
        this.getTableData()
      } else {
        this.pageParamsSubmit.pageSize = val
        this.getTableData()
      }
    },
    handleCurrentChange(val) {
      if (this.activeName === '0') {
        this.pageParamsTemporary.pageNo = val
        this.getTableData()
      } else {
        this.pageParamsSubmit.pageNo = val
        this.getTableData()
      }
    },
    handleSearch(val) {
      if (this.activeName === '0') {
        this.pageParamsTemporary = {
          pageNo: 1,
          pageSize: 10,
          total: null,
        }
        this.formDataTemporary = val
        this.getTableData()
      } else {
        this.pageParamsSubmit = {
          pageNo: 1,
          pageSize: 10,
          total: null,
        }
        this.formDataSubmit = val
        this.getTableData()
      }
    },
    handleDelete() {
      this.$message.warning('功能开发中')
    },
  },
}
</script>

<style lang="scss" scoped>
.periodic_report_wrapper {
  height: 100%;
  background-color: $white;
  .main_part {
    padding: 12px;
    background-color: $white;
    ::v-deep .el-tabs__header {
      margin: 0;
    }
    .header_text {
      margin-bottom: 12px;
      .el-icon-data-line {
        margin-left: 12px;
        margin-right: 12px;
      }
      font-weight: bold;
      font-size: 20px;
    }
  }
}
</style>
